﻿<style>
    body {
        padding-top: 50px;
    }
    /*给顶部导航栏设置字体大小和字体颜色和背景颜色*/
    header .navbar {
        background-color: #00a5e0;
    }

        header .navbar h1 {
            color: white;
            display: block;
            /*text-align: center;*/
            font-size: 20px;
            padding-left: 20px;
        }

    .col-xs-3, .col-xs-4, .col-xs-9, .col-xs-12 {
        position: relative;
        min-height: 1px;
        padding-right: 0px;
        padding-left: 0px;
    }

    .row {
        margin-right: 0px;
        margin-left: 0px;
    }
</style>
<script type="text/javascript">
    $(function () {
        var currYear = (new Date()).getFullYear();
        var opt = {};
        opt.date = { preset: 'date' };
        opt.datetime = { preset: 'datetime' };
        opt.time = { preset: 'time' };
        opt.default = {
            theme: 'android-ics light', //皮肤样式
            //display: 'bubble', //显示方式 (右手方式)
            display: 'modal', //显示方式 (居中方式)
            mode: 'scroller', //日期选择模式
            dateFormat: 'yy-mm-dd',//面板中日期显示格式,同时确定后面板中的时间会赋值到input中去(!不能使用yyyy-mm-dd，使用yyyy会导致年份读取不到默认选择第一年)
            lang: 'zh',
            showNow: true,
            nowText: "今天",
            timeWheels:'HH',//设置时间格式 dateWheels设置日期格式（滚轮有多少个）
            //timeWheels:'HH:ii:ss',//设置时间格式 dateWheels设置日期格式
            timeFormat: 'HH',//面板中时间显示格式，同时确定后面板中的时间会赋值到input中去
            startYear: currYear - 15, //开始年份
            endYear: currYear + 15 //结束年份
            //dateOrder: 'yyyymmdd', //面板中日期排列格式(貌似用不到)
        };
        var optDateTime = $.extend(opt['datetime'], opt['default']);
        $("#beginTime").mobiscroll(optDateTime).datetime(optDateTime);
        $("#endTime").mobiscroll(optDateTime).datetime(optDateTime);
    });

    $(function () {

        //第一次加载时让选择时间控件加载前一天到今天的时间
        //开始时间
        var startTm = getFormatDate(24 * 60 * 60 * 1000*4);
        //var startTm = getFormatDate(0);
        //结束时间
        var endTm = getFormatDate(0);
        $("#beginTime").val(startTm);
        $("#endTime").val(endTm);

        //search按钮查询收缩代码实现
        $("#iconSearch").click(function () {
            if ($('#searchDiv').css("display") === "block") {
                $("#searchDiv").css("display", "none");
            } else {
                $("#searchDiv").css("display", "block");
            }
        });

        //对查询时间进行判断,如果开始时间大于结束时间，则提示查询时间错误
        $('#btnOk').click(function () {
            $("#searchDiv").hide();
            var dateBegin = $("#beginTime").val();
            var dateEnd = $("#endTime").val();
            if (dateBegin > dateEnd) {
                alert("开始时间不能大于结束时间");
            } else {
                $("#h1Title").html(dateBegin + " ~ " + dateEnd);
            }
        });
        $('#btnCancel').click(function () {
            $("#searchDiv").hide();
        });
    });

    //获取时间  time传入毫秒值，24*60*60*1000就代表前一天的时间
    function getFormatDate(time) {
        var date = new Date(new Date() - time);
        var seperator1 = "-";
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
        }
        var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
            + " " + date.getHours();
        return currentdate;
    }

    

</script>
<!--顶部导航栏-->
<header>
    <nav class="navbar navbar-default navbar-fixed-top navbar-inverse" role="navigation">
        <h1 id="h1Title" class="center-block" style="float: left; font-size: 19px;height: 19px">@ViewBag.Title</h1>
        <span id="iconSearch" class="glyphicon glyphicon-search" style="position: relative; top: 20px;float: right; font-size: 22px; color: #fff; padding-right: 25px;"></span>
    </nav>
</header>
<!--查询界面-->
<div id="myTabContent" class="tab-content">
    <div id="searchDiv" style="display: none; position: absolute; z-index: 3; width: 100%; background-color: #eee; border: 8px solid transparent;">
        <div class="demo-block">
            <div id="searchOptionDiv" class="ui-form ui-border-t">
                <div class="ui-form-item ui-border-b" style="padding: 5px">
                    <div class="row">
                        <label class="col-xs-3" style="text-align: right; padding-top: 8px; position: inherit; align-content: center;">开始日期</label>
                        <div class="col-xs-9">
                            <input id="beginTime" readonly="readonly" type="text" class="form-control" />
                        </div>
                    </div>
                </div>
                <div class="ui-form-item ui-border-b" style="padding: 5px">
                    <div class="row">
                        <label class="col-xs-3" style="padding-top: 8px; text-align: right; position: inherit">结束日期</label>
                        <div class="col-xs-9">
                            <input id="endTime" readonly="readonly" type="text" class="form-control" />
                        </div>
                    </div>
                </div>
            </div>
            <div class="row" style="padding: 5px">
                <button type="button" class="btn btn-success col-xs-6" id="btnOk">
                    查询
                </button>
                <button type="button" class="btn btn-default col-xs-6" id="btnCancel">
                    取消
                </button>
            </div>
        </div>
    </div>
</div>